
*{
    margin: 0;
    padding: 0;
}

/* --------------------导航栏开始-----------------------------------------*/
.nav{
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    /* 悬浮在最上方 */
    z-index: 10;
    background-image: linear-gradient(rgb(175, 42, 1), rgba(0, 43, 99, 0));
}
.logo{
  width: 62px;
  height: 80px;  
  background: url(../imgs/logo.png);
  float: left;
  margin-left: 10%;
   
}
.nav ul li{
    width: 150px;
    height: 80px;
    float: left;
    border-radius: 10px;
    list-style-type: none;
    text-align: center;
    margin-left: 2%;
    background-color: transparent;
}
.nav ul li a{
    text-decoration: none;
    color: rgb(255, 255, 255);
    display: block;
    /* 跟随父元素高度 */
    height: inherit;
    line-height: 80px;
}
.nav ul li:hover{
    background-color: rgba(240, 240, 245, 0.322);
}
.nav ul li a:hover{
    color: rgb(175, 42, 1);
}
/* ----------------------------------------导航栏结束 --------------------------------*/

/* ----------------------------------------轮播图开始-------------------------------- */
.banner{
    width: 100vw;
    height: 100vh;
}
.video{
    width: 100%;
    height: 100%;
    position: absolute;
}
.video video{
    width: 100%;
    height: 100%;
    /* 保持原有尺寸比例。但部分内容可能被剪切。 */
    object-fit: cover;
}
/* -----------------------------------------轮播图结束------------------------------- */
  
/* ------------------------------------------内容------------------------------------- */
.content{
    width: 80%;
    height: 600px;
    /* border: 1px solid; */
    margin: 0 auto;
    clear: both;
}
/* 左边开始 */
.content_left{
    width: 23%;
    top: 140px;
    height: 450px;
    float: left;
    margin-left: 1%;
    position: relative;
}
.content_imgl{
    width: 100%;
    height: 50%;
    background: url(../imgs/conner_left.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.content_imgl:hover{
    transition-duration: 1s;
    transition-timing-function: ease;
    transform: scale(105%,105%);
}
.content_left ul{
    width: 100%;
    height: 50%;
    position: relative;
}
.content_left ul li{
    list-style-type: none;
    border-bottom: gray 1px solid;
    width: 90%;
    height: 15%;
    margin-left: 10%;
    margin-top: 5%;

}
.content_left:hover{
    top: 90px;
    transition-duration: 1s;
    transition-timing-function: ease;
}
.content_left ul li:hover{
    color: rgb(175, 42, 1);
}
/* 左边结束 */

/* 中间开始 */
.content_center{
    width: 50%;
    top: 90px;
    height: 500px;
    float: left;
    margin-left: 1%;
    position: relative;
    border-left: 1px gray solid;
    border-right: 1px gray solid;
}
.content_imgc{
    width: 100%;
    height: 70%;
    background: url(../imgs/xiaoqing.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.content_imgc:hover{
    transition-duration: 1s;
    transition-timing-function: ease;
    transform: scale(103%,103%);
}
.content_center ul{
    width: 100%;
    height: 30%;
    position: relative;
}
.content_center ul li{
    list-style-type: none;
    width: 90%;
    height: 15%;
    margin-left: 5%;
    margin-top: 5%;
    text-align: center;
}
.content_center:hover{
    top: 40px;
    transition-duration: 1s;
    transition-timing-function: ease;
}
.content_center ul li:hover{
    color: rgb(175, 42, 1);
}
/*中间结束 */

/* 右边开始 */
.content_right{
    width: 23%;
    top: 140px;
    height: 450px;
    float: right;
    margin-right: 1%;
    position: relative;
    background: url(../imgs/conner_right.png) no-repeat;
    background-size: 100% 50%;
}
.content_imgr{
    width: 100%;
    height: 50%;
    background: url(../imgs/conner_right.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.content_imgr:hover{
    transition-duration: 1s;
    transition-timing-function: ease;
    transform: scale(105%,105%);
}
.content_right ul{
    width: 100%;
    height: 50%;
    position: relative;
}
.content_right ul li{
    list-style-type: none;
    width: 90%;
    border-bottom: gray 1px solid;
    height: 15%;
    margin-left: 10%;
    margin-top: 5%;

}
.content_right:hover{
    top: 90px;
    transition-duration: 1s;
    transition-timing-function: ease;
}
.content_right ul li:hover{
    color: rgb(175, 42, 1);
}
/* 右边结束 */
/* --------------------------------------内容结束-------------------------*/

/* ---------------------------------------新闻开始--------------------- */
.news{
    width: 80%;
    height: 300px;
    background-color: skyblue;
    background: url(../imgs/dang.png) no-repeat;
    background-size: 100% 100%;
    margin: 50px auto;
}
/* ---------------------------------------新闻结束------------------------------ */

/* ----------------------------------------热点开始----------------------------- */
.hot{
    width: 90%;
    height: 600px;
    background-color: rgba(128, 128, 128, 0.15);
    margin: 100px auto;
}
.hot_top{
    width: 250px;
    height: 50px;
   margin: 0 auto;
    position: relative;
}
.hot_top p{
    font-size: 30px;
    font-family: '宋体';
    color: rgb(175, 42, 1);
}
.hot_left{
    width: 45%;
    height: 95%;
    background-color: white;
    background: url(../imgs/hot_left.jpg) no-repeat;
    background-size: 100% 100%;
    top: 2.5%;
    position: relative;
    border-radius:5% ;
    float: left;
    left: 2.5%;
}
.hot_left:hover{
    transform: scale(105%,105%);
    transition-duration: .5s;
    transition-timing-function: ease;
}
.hot_left_bot{
    width: 100%;
    height: 100%;
    transition: all 1s;
    border-radius:5% ;
    opacity: 0;
}
.hot_left_bot p{
    text-align: center;
    color: white;
    font-size: 30px;
    font-family: '宋体';
    position: relative;
    top: 50%;
}
.hot_left_bot:hover{
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
    opacity: 1;
}
.hot_top_left{
    width: 22.5%;
    height: 47.5%;
    background-color:yellow;
    position: relative;
    top: 2.5%;
    left: 50%;
    border-radius: 5%;
    background: url(../imgs/hot_top_left.jpg) no-repeat;
    background-size: 100% 100%;
}
.one{
    width: 100%;
    height: 100%;
    transition: all 1s;
    border-radius:5% ;
    opacity: 0;
}
.one p{
    text-align: center;
    color: white;
    font-size:30px;
    font-family: '宋体';
    position: relative;
    top: -150%;
}
.one:hover{
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
    opacity: 1;
}
.hot_top_left:hover{
    transform: scale(105%,105%);
    transition-duration: .5s;
    transition-timing-function: ease;
}
.hot_top_right{
    width: 22.5%;
    height: 47.5%;
    background-color: hotpink;
    position: relative;
    top: -45%;
    left: 75%;
    border-radius: 5%;
    background: url(../imgs/hot_top_right.jpg) no-repeat;
    background-size: 100% 100%;
}
.three{
    width: 100%;
    height: 100%;
    transition: all 1s;
    border-radius:5% ;
    opacity: 0;
}
.three p{
    text-align: center;
    color: white;
    font-size:30px;
    font-family: '宋体';
    position: relative;
    top: -50%;
}
.three:hover{
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
    opacity: 1;
}
.hot_top_right:hover{
    transform: scale(105%,105%);
    transition-duration: .5s;
    transition-timing-function: ease;
}
.hot_bottom_right{
    width: 47.5%;
    height: 45%;
    background-color: black;
    position: relative;
    top: -42.5%;
    left: 50%;
    background: url(../imgs/hot_bottom_right.jpg) no-repeat;
    background-size: 100% 100%;
}
.hot_bottom_right:hover{
    transform: scale(105%,105%);
    transition-duration: .5s;
    transition-timing-function: ease;
}
.two{
    width: 100%;
    height: 100%;
    transition: all 1s;
    /* border-radius:5% ; */
    opacity: 0; 
}
.two p{
    text-align: center;
    color: white;
    font-size:30px;
    font-family: '宋体';
    position: relative;
    top: 50%;
}
.two:hover{
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
    opacity: 1;
}
/* ---------------------------------------热点结束------------------------------ */
/* -------------------------------------科教动态开始------------------------------ */
.column{
    width: 80%;
    height: 500px;
    border: 2px solid rgba(128, 128, 128, 0.822);
    margin: 0 auto;
    background-color: rgba(128, 128, 128, 0.3);
    border-radius: 1%;
}
.column p{
    text-align: center;
    color: rgb(172, 42, 1);
    font-size: 30px;
    font-family: '宋体';
}
.column_left{
    width: 45%;
    height: 90%;
    left: 2.5%;
    position: relative;
    float: left;
}

.column_left ul{
    width: 100%;
    height: 100%;
    list-style-type: none;
}
.column_left ul li{
    width: 100%;
    height: 10%;
}
.column_left ul li:hover{
    color: rgb(172, 42, 1);
    margin-left: 5%;
}
.column_right{
    width: 45%;
    height: 90%;
    background-color: red;
    background: url(../imgs/column01.jpg) no-repeat;
    background-size: 100% 100%;
    left: 52.5%;
    position: relative;
    animation: 20s column_right infinite;
    border-radius: 2%;
}
@keyframes column_right{
    0%{background-image: url(../imgs/column01.jpg);}
    25%{background-image: url(../imgs/column02.jpg);}
    50%{background-image: url(../imgs/column03.jpg);}
    75%{background-image: url(../imgs/column04.jpg);}
    100%{background-image: url(../imgs/column05.jpg);}

}
/* --------------------------------------科教动态结束----------------------------- */
/*------------------------------------ 尾部开始 ---------------------------*/
.footer{
    width: 100%;
    height: 150px;
    margin: 50px auto;
    background-color: rgb(175, 42, 1);
}
.footer_logo{
    width: 150px;
    height: 150px; 
    background: url(../imgs/footerlogo.png) no-repeat;
    background-size: 100% 100%;
    float: left;
    margin-left: 10%;
}
.footer p{
    font-size: 20px;
    color: white;
    font-family: '宋体';
    position: relative;
    top: 35%;
    left: 5%;
}
.tel,.wechat,.e-mail{
    width: 50px;
    height: 50px;
    background-color: rgb(224, 221, 20);
    float: left;
    position: relative;
    left: 50%;
    margin-left: 2%;
}
.tel{
    background: url(../imgs/tel.png) no-repeat;
    background-size: 100% 100%; 
}
.tel:hover{
    background-size: 105% 105%;
}
.wechat{
    background: url(../imgs/wethat.png) no-repeat;
    background-size: 100% 100%; 
}
.e-mail{
    background: url(../imgs/e-mail.png) no-repeat;
    background-size: 100% 100%; 
}
.e-mail:hover{
    background-size: 105% 105%;
}

.my{
    width: 100%;
    height: 100%;
    background: url(../imgs/my.jpg) no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    transition-property: all;
    transition-timing-function: ease-in;
    transition-duration: 1s;
}
.my:hover{
    width: 400%;
    height: 400%;
    opacity: 1;
    transform: translate(-150px,-150px);
}
/* -----------------------------------------尾部结束-------------------------- */


